<template>
	<div class="shoppingcart_div">
		<div class="header_div">
			<p class="btn_back" @click="btn_back">返回</p>
			购物车
			<p class="btn_head_register btn_edit" @click="btn_edit">编辑</p>
		</div>
		<mt-cell-swipe class="cartCell" :right="[{  
					content: '删除',  
					style: { background: 'red', color: '#fff' },  
					handler: function(){
						return  btn_delGood(item.id)
					}
				}]" v-for="item in cartlist" >
		    <div class="collGood_li">
		    	<div class="checkbox_div">
		    		<input type="checkbox" name="">
		    	</div>
		    	<div class="collGoodIimg_div">
		    		<img :src="baseImg+item.product.masterImg" alt="" style="width: 100%; height:100%; ">
		    	</div>
		    	<div class="collGoodInfo_div">
		    		<p class="collGoodTitle">{{item.product.name1}}</p>
		    		<p class="collGoodInfo">出行人群{{item.id}}</p>
		    		<p class="collGoodPrice">￥{{item.product.malMobilePrice}}</p>
		    		<div class="btn_num_area">
		    			<p @click="btn_goodMinus(item)">-</p>
		    			<p><input type="text" name="" v-model="item.count"></p>
		    			<p @click="btn_goodPlus(item)">+</p>
		    		</div>
		    	</div>
		    </div>
		</mt-cell-swipe> 
		<div class="account_div">
			<div class="fl account_total">
				<p class="fl">
					<input type="radio" name="">全选
				</p>
				<p class="fl">合计：￥{{cartAllData.finalAmount}}</p>
			</div>
			<div class="fl btn_account">结 算</div>
		</div>
	</div>
</template>
<script>
	export default{
		name:'shoppingcart',
		data(){
			return {
				baseImg:"https://md.singaporetong.com",
				delGoodIdArr:{}, // 要删除的购物车ID 值
			}
		},
		components:{
            
        },
        methods:{
        	btn_back:function(){
				this.$router.push({ path: '/mine' })
			},
			btn_edit:function(){

			},
		    btn_goodMinus:function(item){
		    	if(item.count>0){
		    		item.count--;
		    	}else{
		    		item.count = 0;
		    		return false;
		    	}
		    	this.cartAllData.finalAmount = this.cartAllData.finalAmount - item.productGoods.mallMobilePrice;
		    },
		    btn_goodPlus:function(item){
		    	item.count++;
		    	this.cartAllData.finalAmount = this.cartAllData.finalAmount + item.productGoods.mallMobilePrice;
			    //this.cartAllData.finalAmount = item.count * item.productGoods.mallMobilePrice;
		    },
		    btn_delGood:function(id){
		    	var _obj = {};
		    	_obj.id = id;
		    	this.delGoodIdArr = _obj;
		    	this.$store.state.mine.data_delGood = _obj;
		    	this.$store.dispatch('get_delGood',this)
		    }
        },
        created() { 
	    },
	    computed:{
	    	cartlist(){
	    		if(this.$store.state.mine.data_cartlist == undefined){
	    			return false;
	    		}
	    		return this.$store.state.mine.data_cartlist;
	    	},
	    	cartAllData(){
	    		if(this.$store.state.mine.data_cartdata == undefined){
	    			return false;
	    		}
	    		return this.$store.state.mine.data_cartdata;
	    	},
	    },
        mounted:function(){
        	this.$store.dispatch('get_cartlist');
        }
	}
</script>
<style rel="stylesheet" lang="scss" scoped>
	@import "../../assets/css/main.scss";
	.shoppingcart_div{
		.header_div{
			background-color: #FFF;
			color: #000;
			.btn_edit{
				color: #000;
			}
		}
		.cartCell{
			border-bottom: 1px solid #DDD;
			.collGood_li{
				padding-left: 4.5333rem;
				border-bottom: none;
				width: 100%;
				box-sizing: border-box;
				.checkbox_div{
					position: absolute;
					width: 0.5333rem;
					height: 2.4rem;
					left: 0.4rem;
					top: 0.4rem;
					input{
						width: 0.4rem;
						height: 0.4rem;
						border: 1px solid #DDD;
						border-radius: 50%;
						margin-top: 1.0rem;
					}
				}
				.collGoodIimg_div{
					left: 0.9333rem;
				}
				.collGoodPrice{
					color: inherit;
				}
				
			}
		}
		.account_div{
			position: fixed;
			max-width: 750px;
			width: 100%;
			bottom: 0;
			height: 1.3333rem;
			background-color: #FFF;
			overflow: hidden;
			.account_total{
				width: 65%;
				overflow: hidden;
				& p{
					width: 50%;
					line-height: 1.3333rem;
					text-align: center;
				}
				& p:first-child{
					font-size: 0.32rem;
					color: #333333;
				}
				& p:last-child{
					font-size: 0.4rem;
					color: #333333;
				}
			}
			.btn_account{
				width: 35%;
				line-height: 1.3333rem;
				text-align: center;
				background: #FF7D37;
				font-size: 0.4rem;
				color: #FFFFFF;
			}
		}
	}
</style>